import Taro, { Component, Config } from '@tarojs/taro'
import { Button, View } from '@tarojs/components'
import './index.scss'
import { ORDER_TYPE } from "@/config/types"
import { getOrderPage } from '@/api/orderApi'
import { toIntegralOrderInfoPage } from '@/utils/page_router'
import { IntegralOrderCardBody } from "@/market/components/index"
import { ListEmpty, LoadMore, OrderCardHead } from "@/components/index"

export default class Index extends Component {
  state: any
  config: Config = {
    navigationBarTitleText: '兑换记录'
  }

  constructor() {
    super(...arguments)
    this.state = {
      page: 1,
      limit: 10,
      orderList: [],
      loadStatus: 'loading'
    }
  }

  componentWillMount() {
    this.getPage()
  }

  //  下拉加载
  onReachBottom() {
    this.getPage()
  }

  //  获取订单列表数据
  getPage() {
    const { page, limit, orderList, loadStatus } = this.state
    if(loadStatus === 'noMore') {
      return
    }
    getOrderPage({ page, limit, type: "score" }).then(res => {
      const { list, totalCount } = res.data
      this.setState({
        page: page+1,
        orderList: page === 1 ? list : orderList.concat(list),
        loadStatus: (page * limit >= totalCount) ? 'noMore' : 'loading',
      })
    })
  }

  render() {
    const { orderList, loadStatus } = this.state
    return (<View className='integral-order-page xf-page'>
      <View className='order-list'>
        {orderList.map(order => {
          return (<View key={order.id} className='order-item'>
            <OrderCardHead order={order}/>
            <IntegralOrderCardBody order={order} onClick={() => toIntegralOrderInfoPage(order.id)}/>
            <View className='order-foot d-f j-c-e'>
              <Button className='order-btn xf-btn xf-btn-round' onClick={() => toIntegralOrderInfoPage(order.id)}>查看详情</Button>
              {order.status == ORDER_TYPE.UN_CHECK && <Button className='order-btn xf-btn xf-btn-round xf-btn-primary' onClick={() => toIntegralOrderInfoPage(order.id)}>电子凭证</Button>}
              {/*<View className='order-btn border f-g-5' hoverClass='hover-class--btn' onClick={() => toIntegralOrderInfoPage(order.id)}>查看详情</View>*/}
              {/*{order.status == ORDER_TYPE.UN_CHECK && <View className='order-btn voucher-btn f-g-5' hoverClass='hover-class--btn' onClick={() => toOrderVerificationPage(order.id)}>电子凭证</View>}*/}
              {/*<View className='order-btn border f-g-5' hoverClass='hover-class--btn'>查看物流</View>*/}
              {/*<View className='order-btn btn-danger f-g-5' hoverClass='hover-class--btn'>提醒发货</View>*/}
              {/*<View className='order-btn btn-danger f-g-5' hoverClass='hover-class--btn'>确定收货</View>*/}
            </View>
          </View>)
        })}
      </View>

      {!orderList.length && loadStatus == 'noMore' ? (<ListEmpty className='h-p-100'/>) : (<LoadMore status={loadStatus}/>)}
    </View>)
  }
}
